/* Button styling
   ========================================================================== */
/* button */
.btn {
  background-color: transparent;
  border-radius: $eos-btn-border-radius;
  border-width: 2px;
  font-weight: bold;
  line-height: $eos-btn-line-height;
  padding: $eos-btn-padding;
  position: relative;

  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled):active:focus, &:hover, &:active:hover, &:active, &.active, &:focus, &.focus, &.active.focus, &.active:focus, &:active:focus, &:active.focus {
    background-color: transparent;
    box-shadow: none;
  }

  .eos-icons-outlined {
    margin-right: 0;
    pointer-events: none;
    vertical-align: text-bottom;
  }

  &.disabled {
    cursor: not-allowed;
  }
}

/* Hover styles shared between buttons */
.btn-primary, .btn-outline-primary, .btn-secondary, .btn-secondary-inverse, .btn-danger {
  &:not(:disabled):not(.disabled):hover::after {
    background: $eos-btn-primary-color-hover;
    border: $eos-btn-shared-hover-border;
    bottom: $eos-btn-shared-hover-border-position;
    box-sizing: content-box;
    content: '';
    display: block;
    height: $eos-btn-shared-hover-height;
    left: $eos-btn-shared-hover-border-position;
    position: absolute;
    width: 100%;
  }
}

/* Primary button */
.btn-primary {
  background-color: $eos-btn-primary-color;
  border-color: $eos-btn-primary-color;
  color: $eos-btn-primary-text-color;

  &:hover, &:active:hover, &:focus {
    background-color: $eos-btn-primary-color;
    border-color: $eos-btn-primary-color;
    color: $eos-btn-primary-text-color;
  }

  // border bottom which appears on hover
  &:not(:disabled):not(.disabled):hover::after {
    border-color: $eos-btn-primary-color-hover;
  }

  // full border on focus
  &:not(:disabled):not(.disabled):active:focus, &:focus, &.focus, &.active.focus, &.active:focus, &:active:focus, &:active.focus {
    background-color: $eos-btn-primary-color;
    border-color: $eos-btn-primary-color-focus;
  }

  // active state
  &:not(:disabled):not(.disabled):active, &:active, &.active {
    background-color: $eos-btn-primary-color;
    border-color: $eos-btn-primary-color;
    color: $eos-btn-primary-text-color;
  }

  &.disabled, &.disabled:hover, &.disabled:focus {
    background-color: $eos-btn-primary-color;
    border-color: $eos-btn-primary-color;
    color: $eos-btn-primary-text-color;
    opacity: $eos-btn-all-disabled-opacity;
  }
}


/* Outline primary button */
.btn-outline-primary {
  border-color: $eos-btn-primary-color;
  color: $eos-btn-primary-text-color;

  &:hover, &:active:hover {
    border-color: $eos-btn-primary-color;
    color: $eos-btn-primary-text-color;
  }

  // border bottom which appears on hover
  &:not(:disabled):not(.disabled):hover::after {
    background-color: $eos-btn-primary-color;
  }

  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled):active:focus, &:active, &.active, &:focus, &.focus, &.active.focus, &.active:focus, &:active:focus, &:active.focus {
    border-color: $eos-btn-primary-color-active;
    color: $eos-btn-primary-color-active;

    // hide underline
    &:hover::after {
      height: 0;
    }
  }

  &.disabled, &.disabled:hover, &.disabled:focus {
    border-color: $eos-btn-primary-color;
    color: $eos-btn-primary-text-color;
    opacity: $eos-btn-all-disabled-opacity;
  }
}

/* Default button */
.btn-secondary {
  border-color: $eos-btn-secondary-color;
  color: $eos-btn-secondary-color;

  &:hover, &:active:hover {
    border-color: $eos-btn-secondary-color-hover;
    color: $eos-btn-secondary-color-hover;
  }

  // border bottom which appears on hover
  &:not(:disabled):not(.disabled):hover::after {
    background-color: $eos-btn-secondary-color;
  }

  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled):active:focus, &:active, &.active, &:focus, &.focus, &.active.focus, &.active:focus, &:active:focus, &:active.focus {
    border-color: $eos-btn-secondary-focus;
    color: $eos-btn-secondary-color-active;

    // hide underline
    &:hover::after {
      height: 0;
    }
  }

  &.disabled, &.disabled:hover, &.disabled:focus {
    background-color: transparent;
    border-color: $eos-btn-secondary-disabled;
    color: $eos-btn-secondary-disabled;
    opacity: $eos-btn-all-disabled-opacity;
  }

  // offset dropdown ::after margin
  &.dropdown-toggle::after {
    margin-left: 0;
  }
}

/* Default button inverse */
.btn-secondary-inverse {
  border-color: $eos-btn-secondary-inverse-color;
  color: $eos-btn-secondary-inverse-color;

  &:hover, &:active:hover {
    border-color: $eos-btn-secondary-inverse-color-hover;
    color: $eos-btn-secondary-inverse-color-hover;
  }

  // border bottom which appears on hover
  &:not(:disabled):not(.disabled):hover::after {
    background-color: $eos-btn-secondary-inverse-color;
  }

  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled):active:focus, &:active, &.active, &:focus, &.focus, &.active.focus, &.active:focus, &:active:focus, &:active.focus {
    border-color: $eos-btn-secondary-inverse-color-active;
    color: $eos-btn-secondary-inverse-color;

    // hide underline
    &:hover::after {
      height: 0;
    }
  }

  &.disabled, &.disabled:hover, &.disabled:focus {
    background-color: transparent;
    border-color: $eos-btn-secondary-inverse-color;
    color: $eos-btn-secondary-inverse-color;
    opacity: $eos-btn-all-disabled-opacity;
  }
}

/* Danger button */
.btn-danger {
  background-color: $eos-btn-danger-color;
  border-color: $eos-btn-danger-color;
  color: $eos-btn-danger-text-color;

  &:hover, &:active:hover {
    background-color: $eos-btn-danger-color-hover;
    border-color: $eos-btn-danger-color-hover;
    color: $eos-btn-danger-text-color;
  }

  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled):active:focus, &:active, &.active, &:focus, &.focus, &.active.focus, &.active:focus, &:active:focus, &:active.focus {
    background-color: $eos-btn-danger-color-active;
    border-color: $eos-btn-danger-color-active;
    color: $eos-btn-danger-text-color;
  }

  &.disabled, &.disabled:hover, &.disabled:focus {
    background-color: $eos-btn-danger-color;
    border-color: $eos-btn-danger-color;
    color: $eos-btn-danger-text-color;
    opacity: $eos-btn-all-disabled-opacity;
  }
}

/* Icon only button */
.btn-icon {
  i {
    margin: 0;
  }
}

/* Extra small button */
.btn-xs {
  padding: $eos-btn-xs-padding;
}

/* Small button */
.btn-sm {
  padding: $eos-btn-sm-padding;
}

/* Vertical-align icons Extra small and small button */
.btn-xs, .btn-sm {
  .eos-icons-outlined {
    vertical-align: bottom;
  }
}

/* Large button */
.btn-lg {
  padding: $eos-btn-lg-padding;
}

/* Inverse button demo wrapper */
.btn-inverse-demo {
  background: $eos-bc-pine-500;
  padding: $eos-l;
}

.btn-unstyled {
  background: none;
  border: 0;
  padding: 0;

  &:hover {
    background: none;
  }
}
